<template>
  <div class="view-design d-layout-container d-layout-container-dark">
    <div v-if="isShowHeader" class="design-header d-layout-header">
      <div class="design-name">{{ state.name }}</div>
      <div class="design-actions">
        <FormButton @click="handleBack">返回列表</FormButton>
      </div>
    </div>
    <div class="design-body d-layout-body d-bg-fog">
      <div class="design-render">
        <DRender :stock="stock" ref="drender" />
      </div>
    </div>
  </div>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar, FormSelecter, FormButton } from '@daelui/vdog/dist/components.js'
import { parser } from '@daelui/dogjs/dist/components.js'
import { STATUS } from '@daelui/dogjs/dist/constant.js'
import DComponents from './dcomponents.vue'
import DRender from './drender.vue'
import DProperty from './dproperty.vue'
import stock, { state, setter } from '@/service/stock/index'
import vrSer from '@/service/action/viewrelease.action'
import vcSer from '@/service/action/viewcomp.action'
import componentCollection from './components/components'

export default {
  components: {
    PanerForm,
    FormCalendar,
    Dialoger,
    FormSelecter,
    FormButton,
    DComponents,
    DRender,
    DProperty
  },

  props: {
    isShowHeader: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      STATUS,
      // 表单数据
      state: {
        id: '',
        pid: '',
        name: '',
        meta: {},
        layout: '',
        description: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      stock
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem (params) {
      vrSer.queryItem(params).then(result => {
        let data = result.data || {}
        // 组件元数据
        let meta = parser.parse(data.meta) || {
          component: 'div',
          properts: {},
          events: {},
          resource: {},
          theme: {},
          childComponents: []
        }
        meta.childComponents = meta.childComponents || []
        data.meta = meta
        this.state = data
        state.page = data

        // 设置页面title
        if (data.name) {
          document.title = data.name
        }
      })
    },

    /**
     * @function 重置
    */
    handleReset () {

    },

    handleBack () {
      this.$router.push(this.getMicroRoute('/dview/page/list'))
    }
  },

  beforeMount () {
    // 查询所有视图组件
    vcSer.queryAllComponents().then(cps => {
      componentCollection.push(...cps)
      setter.setComponentCollection(componentCollection)
    })
  },

  mounted () {
    let params = this.$route.params
    let query = this.$route.query
    if (query.id) {
      this.loadItem({id: query.id})
    } else {
      this.loadItem({vpid: params.id || '-9999'})
    }
  }
}
</script>

<style lang="less" scoped>
.d-layout-container {
  & >.d-layout-body {
    min-height: 100vh;
  }
}
.view-design {
  width: 100%;
  .design-header {
    .design-name {
      float: left;
      display: flex;
      align-items: center;
      padding-left: 8px;
      height: 100%;
    }
    .design-actions {
      float: right;
      display: flex;
      height: 100%;
      align-items: center;
      padding-right: 8px;
      /deep/ .d-btn {
        margin-left: 8px;
      }
    }
  }
  .design-side {
    overflow: visible;
    width: 96px;
    .item-component {
      cursor: pointer;
    }
    .component-name {
      text-align: center;
    }
  }
  .design-property {
    overflow: visible;
    width: 512px;
  }
  .design-render {
    width: 100%;
  }
}
</style>
